<template>
  <el-card shadow="never" class="margin-top-20 margin-left-20 margin-right-20">
    <el-row :gutter="20">
      <!-- 添加按钮  -->
      <el-col :span="6">
        <el-button size="medium" @click="handleClick({})">添加菜单</el-button>
        <el-button
          size="medium"
          :disabled="active_id == -1"
          @click="handleClick(active_row, active_id)"
        >
          添加子菜单
        </el-button>
        <i
          class="el-icon-refresh margin-left-20 cursor-pointer"
          style="funt-size: 16px; color: #e6a23c"
          @click="getData"
        />
      </el-col>
    </el-row>
    <el-table
      :data="tableData"
      style="width: 100%"
      border
      highlight-current-row
      @current-change="handleCurrentChange"
      class="margin-top-20"
    >
      <el-table-column
        class-name="padding-10"
        prop="title"
        label="菜单标题"
        width="180"
      >
      </el-table-column>
      <el-table-column class-name="padding-10" prop="path" label="菜单路径">
      </el-table-column>
      <el-table-column
        class-name="padding-10"
        prop="component"
        label="菜单路径"
        width="180"
      >
      </el-table-column>
      <el-table-column
        class-name="padding-10"
        prop="c_time"
        label="创建时间"
        width="180"
      >
      </el-table-column>
      <el-table-column class-name="padding-10" label="操作" width="180">
        <template slot-scope="scope">
          <el-button type="text" @click="handleClick(scope.row)">
            编辑
          </el-button>
          <el-divider direction="vertical" />

          <el-button type="text" @click="handleDelete(scope.row.id)">
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-drawer
      :visible.sync="show"
      :with-header="false"
      size="400px"
      destroy-on-close
      :wrapper-closable="false"
    >
      <div class="drawer-title">
        <span>{{ title }}</span>
        <i class="el-icon-close cursor-pointer" @click="show = false" />
      </div>
      <div class="drawer-content">
        <!-- 菜单标题  title-->
        <!-- 是否显示根目录    alwaysShow-->
        <!--  当路由设置了该属性，则会高亮相对应的侧边栏。
   这在某些场景非常有用，比如：一个文章的列表页路由为：/article/list
   点击文章进入文章详情页，这时候路由为/article/1，但你想在侧边栏高亮文章列表的路由，就可以进行如下设置 -->
        <!-- 激活的菜单    activeMenu-->
        <!-- 菜单路径  path-->
        <!-- 文件路径 component-->
        <!-- 打开方式 target-->
        <!-- 是否展示 hidden -->
        <!-- 重定向  redirect-->
        <!-- 菜单权限  roles-->
        <el-form
          ref="ruleForm"
          label-position="right"
          label-width="100px"
          :model="formLabelAlign"
          :rules="formRules"
          size="small"
        >
          <el-form-item label="菜单标题" prop="title">
            <el-input v-model="formLabelAlign.title"></el-input>
          </el-form-item>
          <el-form-item label="菜单路径" prop="path">
            <el-input v-model="formLabelAlign.path"></el-input>
          </el-form-item>
          <el-form-item label="文件路径" prop="component">
            <el-input v-model="formLabelAlign.component"></el-input>
          </el-form-item>
          <el-form-item
            label="激活的菜单"
            v-if="formLabelAlign.pid"
            prop="activeMenu"
          >
            <el-input v-model="formLabelAlign.activeMenu"></el-input>
          </el-form-item>
          <el-form-item label="重定向" prop="redirect">
            <el-input v-model="formLabelAlign.redirect"></el-input>
          </el-form-item>
          <el-form-item label="icon" prop="redirect">
            <el-input v-model="formLabelAlign.icon"></el-input>
          </el-form-item>
          <el-form-item label="发开方式" prop="target">
            <el-radio v-model="formLabelAlign.target" :label="true">
              新页面
            </el-radio>
            <el-radio v-model="formLabelAlign.target" :label="false">
              当前窗口
            </el-radio>
          </el-form-item>
          <el-form-item label="是否隐藏" prop="hidden">
            <el-radio v-model="formLabelAlign.hidden" :label="true">
              是
            </el-radio>
            <el-radio v-model="formLabelAlign.hidden" :label="false">
              否
            </el-radio>
          </el-form-item>
          <el-form-item label="菜单权限" prop="roles">
            <el-select
              v-model="formLabelAlign.roles"
              multiple
              placeholder="请选择"
            >
              <el-option
                v-for="(item, index) in roles"
                :key="index"
                :label="item.title"
                :value="item.lable"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </div>

      <div class="drawer-botton">
        <el-button
          type="primary"
          size="small"
          :loading="addLoading"
          @click="handleEdit(formLabelAlign)"
        >
          确定
        </el-button>
      </div>
    </el-drawer>

    <el-pagination
      class="margin-top-10 text-align-right"
      background
      layout="prev, pager, next"
      :current-page.sync="page"
      :total="total"
      @current-change="getData"
    />
  </el-card>
</template>
<script>
import { getMenus, deleteMenus, createMenus } from "@/api/menu";
import { getRoles } from "@/api/user";

export default {
  data() {
    return {
      addLoading: false,
      page: 1,
      formRules: {
        title: [{ required: true, message: "请输入菜单标题", trigger: "blur" }],
        path: [{ required: true, message: "请输入菜单路径", trigger: "blur" }],
        component: [
          { required: true, message: "请输入文件路径", trigger: "blur" },
        ],
      },
      formLabelAlign: {},
      title: "添加菜单",
      show: false,
      totoItem: {},
      tableData: [],
      roles: [],
      total: 0,
      active_id: -1,
    };
  },
  mounted() {
    this.getRoles();
    this.getData();
  },
  methods: {
    setCurrent(row) {
      this.$refs.singleTable.setCurrentRow(row);
    },
    handleCurrentChange(val) {
      this.currentRow = val;
      this.rowClick(val);
    },
    rowClick(row) {
      console.log(row);
      this.active_id = row.id;
      this.active_row = row;
    },
    rowName({ row }) {
      if (row.id == this.active_id) {
        return "active_row";
      }
    },
    getRoles() {
      getRoles().then((res) => {
        this.roles = res.data.lists;
        this.total = res.data.total;
        console.log(this.roles);
      });
    },
    handleClick(row, pid) {
      if (!Object.prototype.hasOwnProperty.call(row, "target")) {
        row.target = false;
        row.hidden = false;
        this.title = "添加菜单";
      } else {
        this.title = "修改菜单";
      }
      if (pid > -1) {
        row = {};
        row.target = false;
        row.hidden = false;
        row.pid = pid;
        this.title = "添加子菜单";
      }

      this.formLabelAlign = this.$deepClone(row);
      this.show = true;
    },
    handleDelete(id) {
      deleteMenus({ id: id }).then((res) => {
        if (res.code == 200) this.getData();
      });
    },
    handleEdit(item) {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          createMenus(item).then((res) => {
            this.show = false;
            this.getData();
            this.$refs.ruleForm.resetFields();
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    getData() {
      getMenus({ page: this.page }).then((res) => {
        this.tableData = res.data.list;
        this.total = res.data.total;
        this.active_id = -1;
      });
    },
  },
};
</script>
<style>
.margin-right-20 .padding-10 {
  padding: 10px 0;
}
.drawer-content {
  padding: 20px 10px;
}
.active_row {
  background: #e8e8e8 !important;
}
</style>
